<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.js"></script>
</head>

<body>
    <div>123</div>
    <ul>
        <li></li>
        <li>
            <section>
                <span></span>
            </section>
        </li>
        <li></li>
    </ul>
    <span></span>
    <button>切换</button>
    <script>
        // 获取元素
        var $ul = $("ul");
        var $btn = $("button");


        // css()方法
        // 1 两个参数  第一个属性是css属性名 第二个属性是css属性值
        // $ul.css("width", "200")  // ul.style.width = "200px"

        // 2 一个参数 参数类型是字符串 表示获取
        // console.log($ul.css("height")) // 计算后属性  等价于 getComputedStyle(ul)["height"]

        // 3 一个参数 参数类型是对象
        // $ul.css({
        //     width: '100px',
        //     height: '100px'
        // })



        // 添加类名    删除类型       切换类名
        // addClass()  removeClass()  toggleClass()
        // $ul.addClass("aaa")
        // $ul.addClass("bbb") 
        // $ul.removeClass("aaa")
        // $btn.click(function() {
        //     $ul.toggleClass("a")
        // })
    </script>
</body>

</html>